<template>
  <div>
    <h2>Count:{{ num }}</h2>
    <h2>doubleNum:{{ doubleNum }}</h2>
    <button @click="increment">累加</button>
    <button @click="incrementN(3)">累加n</button>
    <button @click="incrementWaitN(3)">等一下累加n</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Count",
});
</script>

<script setup lang="ts">
  import { storeToRefs } from "pinia";
  // 引入对应的pinia 暴露的自定义hooks
  import useCountStore from '../store/module/count';
  // 调用自定义hooks 得到当前pinia模块store对象
  const countStore = useCountStore();
  // 使用pinia提供的 storeToRefs 方法 对store对象进行解构 即可得到对应的store中的 ref对象类型的值
  const { num,doubleNum } = storeToRefs(countStore);
  const { increment,incrementN,incrementWaitN } = countStore;
</script>

<style  scoped lang="scss">
  
</style>